<template>

<div class="pic-main">
  <div>
    <el-card shadow="never" class="box-card1">
      <div slot="header" class="clearfix">
        <span>上传素材</span>
      </div>
      <el-row :gutter="10">
       <el-col :span="6">
         <div>
           <el-upload
               class="upload-demo"
                 :action="`${host}/admin/xy/upload/uploadImg`"
               multiple
               :limit="3"
               :on-progress:="startUp"
               :on-success="upSuccess"
               :show-file-list="false"
               :headers="headers"
              >
             <el-button size="small" type="primary" :loading="showloding">
               <span v-show="showloding">上传中</span><span v-show="showloding">点击上传</span>
               点击上传
             </el-button>
           </el-upload>
         </div>
       </el-col>
      <el-col :span="6" :offset="8">
         <el-input v-model="searchtitl"  placeholder="请输入图片名称" size="medium" class="search"></el-input>
        <el-button type="primary" size="small" @click="deSearch" class="searchbar">点击查询</el-button>
        <el-button type="primary" size="small" @click="resat" class="rest">重置列表</el-button>

      </el-col>
      </el-row>

    </el-card>

    <picture-list ref="lists" :ti="searchtitl"></picture-list>
  </div>
</div>
</template>

<script>
import host from '@/settings'
import PictureList from '@/views/material/picture/PictureList'
import {getToken} from '@/utils/myauths'
export default {
name: "Matepic",
  components:{
    PictureList
  },
data(){
return{
host:host.host,
  showloding:false,
  searchtitl:'',
  headers:{
    'bufan-token':''
  }
}

},
methods:{
  // 开始上传的钩子
  startUp(){
    this.showloding=true;
  },
  // 上传成功的钩子函数
  upSuccess(response, file, fileList){
    this.showloding=false;
    console.log(file)
    this.$refs.lists.getList()
    this.$message('上传成功')
  },
  //查询
  deSearch(){
    this.$refs.lists.getList()
    this.searchtitl=""
  },
  // 重置条件
  resat(){
    this.$refs.lists.getList()
  }
},
  created(){
let tok = getToken()
   this.headers["bufan-token"] = tok

  }
}
</script>

<style lang="scss" scoped>
.pic-main{
  .box-card1{
    width: 80%;
    margin-left: 10%;
    margin-bottom: 20px;
    .search{
      width: 200px;
      margin-bottom: 5px;
    }
    .searchbar{
      margin-left:15px;
    }
  }
}
</style>
